<template>
	<view class="container">
		<uni-nav-bar left-icon="left" style="position: fixed;left: 0;right: 0;top:0;height: 108rpx;z-index: 1;" :statusBar="true" :shadow="true" left-text="返回" @clickLeft="WoundedReturn()">
			<template v-slot:default>
				伤员列表
			</template>
			<template v-slot:right>
			</template>
		</uni-nav-bar>
		<view class="rudon-rowMenuDotDotDot">
			<rudon-rowMenuDotDotDot :localdata="sift" @change="menuAction($event)">
				<span class="triangle">{{sift[displaySift-1].text}}</span>
			</rudon-rowMenuDotDotDot>
		</view>
		<!-- {{displaySift==1}}{{baseFormDatas.length!==0}}{{uploadedData.length!==0}} -->
		<uni-swipe-action class="action"  v-if="displaySift == 1 && baseFormDatas.length">
			<!-- 基础用法 -->

			<uni-swipe-action-item v-for="(item,index) in baseFormDatas" class="action-item" :right-options="options"
				@change="change" @tap="onClickss($event,item)">
				<view class="list" @click="onClicks(item)">
					<view class="left">
						<image style="width: 100rpx; height: 100rpx; " mode="widthFix" src="../../static/icons/sy.png"
							@error="imageError"></image>
						<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
						<view class="text">
							<text style="font-size: 28rpx;display: block;">{{item.xm}}</text>
							<text style="font-size: 16rpx;display: block;">患者编号：{{item.bh}}</text>
						</view>
					</view>
					<view class="right">
						到达时间：{{item.ddsj}}
					</view>
				</view>

			</uni-swipe-action-item>
			<uni-load-more status="no-more" :contentText="contentText" />

		</uni-swipe-action>

		<uni-swipe-action class="action" v-else-if="displaySift == 2 && uploadedData.length">

			<uni-swipe-action-item style="margin-bottom: 15rpx;" v-for="(item,index) in uploadedData"
				class="action-item" @change="s($event)" @click="onClick($event,item)" :right-options="options">
				<view class="list" @click="viewDetail(item)">
					<view class="left">

						<image style="width: 100rpx; height: 100rpx; " mode="widthFix" src="../../static/icons/sy.png"
							@error="imageError"></image>
						<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
						<view class="text">
							<text style="font-size: 28rpx;display: block;">{{item.xm}}</text>
							<text style="font-size: 16rpx;display: block;">患者编号：{{item.bh}}</text>
						</view>
					</view>
					<view class="right">
						到达时间：{{item.ddsj}}
					</view>
				</view>
			</uni-swipe-action-item>
			<uni-load-more :status="status" :contentText="contentText" />

		</uni-swipe-action>
		<view class="no-data" v-else style="text-align: center;">
			<image src="../../static/icons/nodata.png" style="width: 150rpx;" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
		<!-- 流转弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<uni-section title="流转" type="line">
					<view class="example">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="baseForm" :modelValue="baseFormData" label-width="100px">
							<uni-forms-item label="伤员分组" class="wounded">
								<uni-data-select v-model="baseFormData.office" :localdata="typeArrOffice"
									placeholder="请选择伤员分组" />
							</uni-forms-item>
							<uni-forms-item label="初步诊断">
								<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请输入初步诊断" />
							</uni-forms-item>
						</uni-forms>
					</view>
					<view class="fixedBottom">
						<button class="trueDecide" @click="trueDecide()">确定</button>
						<button class="cancel" @click="cancel()">取消</button>
					</view>
				</uni-section>
			</view>
		</uni-popup>
		<!-- 更多弹窗 -->
		<uni-popup ref="more" background-color="#fff">

			<view class="more-content" >
				<button class="moreButton" @click="circulation()">流转</button>
				<button class="moreButton" @click="orders()">医嘱</button>
				<button class="moreButton" @click="nursing()">护理</button>
				<button class="moreButton" @click="illness()">病情</button>
				<button class="moreButton" @click="evacuation()">后送</button>
				<button class="moreButton" @click="goods()">物资</button>
			</view>
		</uni-popup>
		<!-- 删除提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" title="提示" content="是否确认删除"
				@confirm="dialogConfirm()" @close="dialogClose()"></uni-popup-dialog>
		</uni-popup>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="fixedBottom" v-if="displaySift==1">
			<button @click="uploads" v-if="baseFormDatas">上传离线伤员</button>
		</view>


	</view>
</template>

<script>
	import {
		viewWounded,
		grouping,
		Circulation,
		removeById,
		upload
	} from '../../api/huanzhe.js'

	import {
		log
	} from '../../common/util.js'
	import {
		toast,
		signOut,
		getStorageSync,
		useRouter,
		removeStorageSync,
		setStorageSync
	} from '../../utils/utils.js'
	export default {
		data() {
			return {
				baseFormDatas: [],
				status: 'more',
				InquireData: {
					pageNum: 1,
					skipCount: 0,
					pageSize: 10,
					bz: 1
				},
				jumpItem: {},
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我也是有底线的~'
				},
				typeArrOffice: [],
				baseFormData: {
					office: null,
					name: null
				},
				uploadedData: [],
				total: 0,
				displaySift: 1,
				sift: [{
						value: 1,
						text: '未上传列表'
					},
					{
						value: 2,
						text: '已上传列表'
					}
				],
				delQuery:{
					id:null,
					del:null
				},
				Circulation: {
					hzId: null,
					bz: null,
					deptId: null,
					deptname: null
				},
				delPatient:[],
				options: [{
						text: '更多',
						value: 1,
						style: {
							backgroundColor: '#8EBCBD'
						}
					},
					{
						text: '修改',
						value: 2,
						style: {
							backgroundColor: '#007aff',
							height: '80px'
						}
					}, {
						text: '删除',
						value: 3,
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		onLoad() {
			this.uploaded()
			this.groupingQuery()
			this.baseFormDatas = getStorageSync('baseFormData')

			console.log(this.baseFormDatas);
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.displaySift == 2) {
				// 已上传列表
				this.InquireData.pageNum = 1
				this.uploaded()
			} else {
				uni.stopPullDownRefresh();
			}

		},
		// 触底加载

		onReachBottom(e) {
			if (this.displaySift == 2) {
				this.InquireData.pageNum++;
				this.uploaded()
			}
		},
		methods: {
			// 上传离线伤员
			uploads() {
				console.log(this.baseFormDatas);
				upload(this.baseFormDatas).then(res => {
					toast(res.msg)
					if (res.code === 200) {
						removeStorageSync('baseFormData')
						this.baseFormDatas = []
						this.uploaded()
					}

				})
			},
			uploaded() {
				viewWounded(this.InquireData).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.status = this.InquireData.pageNum >= Math.ceil(res.total / 10) ? 'no-more' : 'more'
						uni.stopPullDownRefresh();

						if (this.InquireData.pageNum > 1) {
							this.uploadedData.push(...res.rows)

						} else {
							console.log(res.rows);
							this.uploadedData = res.rows
						}
					}
				})
			},
			goods() {
				this.$refs.more.close()
				useRouter('/pages/casualtyList/applyGoods', {
					hzId: this.jumpItem.id
				}, 'navigateTo')
			},
			// 后送
			evacuation() {
				this.$refs.more.close()
				const {
					id,
					xm,
					xb,
					nl
				} = this.jumpItem
				useRouter('/pages/evacuation/newEvacuation', {
					id,
					xm,
					xb,
					nl
				}, 'navigateTo')

			},
			// 病情
			illness() {
				this.$refs.more.close()
				const {
					id,
					xm,
					xb,
					nl
				} = this.jumpItem
				useRouter('/pages/illness/newIllness', {
					id,
					xm,
					xb,
					nl
				}, 'navigateTo')

			},
			// 护理
			nursing() {
				this.$refs.more.close()
				useRouter('/pages/nursing/newNursing', {
					hzId: this.jumpItem.id,
					xm: this.jumpItem.xm,
					xb: this.jumpItem.xb,
					nl: this.jumpItem.nl
				}, 'navigateTo')
			},
			// 医嘱
			orders() {
				this.$refs.more.close()
				useRouter('/pages/casualtyList/newOrders?bh=' + this.jumpItem.bh + '&xm=' + this.jumpItem.xm + '&xb=' +
					this.jumpItem.xb + '&nl=' + this.jumpItem.nl + '&id=' + this.jumpItem.id)
			},
			// 查询分组
			groupingQuery() {
				grouping().then(res => {
					res.data.forEach((item, index) => {
						var typeArrOffice = {
							value: item.dictLabel,
							text: item.dictValue
						}
						this.typeArrOffice.push(typeArrOffice)
					})
					this.typeArrOffice.splice(3, 1)
				})
			},
			// 流转
			circulation() {
				this.$refs.more.close()
				this.$refs.popup.open("bottom")
			},
			// 删除提示框取消
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			// 删除成功提示
			dialogConfirm() {
				if(this.delQuery.del==1){
					// 未上传伤员删除
						this.delPatient=getStorageSync('baseFormData')
						this.delPatient.forEach((item,index)=>{
							if(item.bh==this.delQuery.id){
								console.log(1);
								this.delPatient.splice(index,1)
							}
						})
						setStorageSync('baseFormData',this.delPatient)
						this.baseFormDatas=getStorageSync('baseFormData')
						this.delQuery={}
				}else{
					removeById(this.jumpItem.id).then(res => {
						if (res.code === 200) {
							this.uploaded()
							toast('删除成功')
							
						} else {
							this.uploaded()
							toast('删除失败')
							
						}
						this.$refs.alertDialog.close()
					})
				}
			},
			// 流转弹窗取消
			cancel() {
				this.$refs.popup.close()
			},
			// 流转弹窗成功
			trueDecide() {
				this.Circulation.bz = this.baseFormData.name
				this.Circulation.deptId = this.baseFormData.office
				this.typeArrOffice.forEach((item, index) => {
					if (this.baseFormData.office == item.value) {
						this.Circulation.deptname = item.text
					}
				})
				console.log(this.Circulation);
				Circulation(this.Circulation).then(res => {
				
					if (res.code == 200) {
						toast("流转成功")
					} else {
						toast("流转失败")
					}
					this.baseFormData = {
						office: null,
						name: null
					}
					this.Circulation = {}
				})
				this.$refs.popup.close()
				this.$refs.more.close()
				this.uploaded()
			},
			// 详情跳转
			viewDetail(item) {
				this.$refs.more.close()
				uni.navigateTo({
					url: '/pages/wounded/index?option=2&bh=' + item.id
				})
			},
			// 返回跳转
			WoundedReturn() {
				console.log(123456789);
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 未上传伤员详情
			onClicks(item) {
				useRouter('/pages/offlineWounded/index', item, 'navigateTo')
			},
			// getImg(imgName){
			// 	return new URL(`/static/icons/${imgName}`, import.meta.url).href;
			// },
			// 右侧滑动按钮 1：更多 2：修改 3：删除
			onClick(e, bh) {
				this.Circulation.hzId = bh.id
				this.jumpItem = bh
				setTimeout(() => {
					switch (e.content.value) {
						case 1: {
							// uni.navigateTo({
							// 	url:'/pages/casualtyList/newOrders'
							// })
							this.$refs.more.open("right")
							break;
						}
						case 2: {
							uni.navigateTo({
								url: '/pages/wounded/index?option=1&bh=' + bh.id
							})
							break;
						}
						case 3: {
							this.$refs.alertDialog.open()
							break
						}
					}
				}, 500)
			},
			onClickss(e, bh) {
				switch (e.content.value) {
					case 2:
						useRouter('/pages/offlineWounded/index', {
							bh: bh,
							update: 1
						}, 'navigateTo')
						break
					case 3:
					this.delQuery.id=bh.bh
					this.delQuery.del=1
					this.$refs.alertDialog.open()
					break
				}
			},
			s(e) {
				console.log(e + '获取的数据');
			},
			// change(e) {
			// 	console.log('dsadsa'+e);
			// },
			// sift(){
			// 	this.$refs.inputDialog.open()
			// },
			// 筛选
			menuAction(val) {
				console.log(val);
				// 忽略初始化时的传入的空操作
				if (val === '') return
				this.displaySift = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
		position: relative;

	}

	.fixedBottom {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-between;

		button {
			background-color: #23440d;
			margin: 0 40rpx;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	.no-data {
		position: absolute;
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;
		color: #333333;
		width: 100%;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	// .triangle {
	// 	position: relative;
	// 	&::before{
	// 		content: '';
	// 		position: absolute;
	// 		top: 0;
	// 		right: 0;
	// 		width: 0;
	// 		height: 0;
	// 		border-top: 20rpx solid skyblue;
	// 		border-right: 20rpx solid transparent;
	// 		border-left: 20rpx solid transparent;
	// 	}

	// }
	.rudon-rowMenuDotDotDot {
		position: absolute;
		right: 50rpx;
		top: 5%;
		z-index: 2;
		&::before {
			content: '';
			position: absolute;
			top: 40%;
			right: -20rpx;
			width: 0;
			height: 0;
			border-top: 10rpx solid #333;
			border-right: 10rpx solid transparent;
			border-left: 10rpx solid transparent;
		}
	}

	.moreButton {
		
		width: 250rpx;
		background-color: transparent;
		border-bottom: #23440d 1px solid;
		border: none;
		outline: none;
		color: #23440d;
	}

	.clearBoth {
		clear: both
	}

	.viewOrders {
		height: 65rpx;
		width: 27%;
		line-height: 68rpx;
		font-size: 12rpx;
		background-color: #23440d;
		color: #fff;
	}

	.manual {
		height: 65rpx;
		width: 20%;
		margin-left: 1%;
		float: left;
		line-height: 68rpx;
		font-size: 28rpx;
		background-color: #23440d;
		color: #fff;
	}

	.package {
		float: left;
		width: 50%;
	}

	::v-deep.uni-section .uni-section-header__decoration {
		margin-right: 6px;
		background-color: #23440d;
	}

	.cancel {
		float: right;
		width: 45%;
		background-color: #23440d;
		color: white;
	}

	.trueDecide {
		float: left;
		width: 45%;
		background-color: #23440d;
		color: white;
	}

	.orders-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 100%;
		background-color: #fff;
	}

	.orders-height {
		width: 200px;
		
	}

	.more-content {
		align-items: center;
		justify-content: center;
		padding: 150rpx 0rpx 30rpx;
		height: 100%;
		background-color: #fff;
	}

	.more-height {
		width: 500px;
	}

	.popup-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 300px;
		background-color: #fff;
	}

	.popup-height {
		width: 500px;
	}



	::v-deep.uni-navbar__header-container {
		display: flex;
		// flex: 1;
		align-items: center;
		justify-content: center;
		padding: 0 10px;
		overflow: hidden;
		font-size: 28rpx;
		font-weight: 500;
	}

	.container {

		.no {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding: 30rpx;
		}
		.action{
			padding-top: 134rpx;
			
			.action-item {
				height: 102rpx;
				line-height: 1.7;
				background-color: #fefefe;
				box-shadow: inset 0rpx 44rpx 102rpx #efefef;
				
				.list {
					padding: 0rpx 34rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
			
					.left {
						display: flex;
						align-items: center;
			
						.text {}
					}
			
					.right {
						font-size: 18rpx;
					}
				}
			}
		}

	}
</style>